<template>
  <div class="chanceManagement">
    <div class="header">新建商机</div>
    <el-collapse v-model="data.activeNames" @change="handleChange">
      <el-collapse-item class="collapse" title="客户信息" name="1">
        <el-row
          class="row"
          v-for="(row, index) in data.customer"
          :key="'row' + index"
        >
          <template v-for="(col, index) in row" :key="'col1' + index">
            <el-col class="col" :span="4">
              <div class="item item-label">{{ col.label }}：</div>
            </el-col>
            <el-col class="col" :span="4">
              <el-select
                v-if="col.type === 'select'"
                class="item item-value"
                :placeholder="'请选择' + col.label"
                v-model="data.customerValue[col.id]"
              >
                <el-option
                  v-for="(item, index) in data.customerOption[col.id]"
                  :value="item.value"
                  :label="item.label"
                  :key="'op' + index"
                >
                  {{ item.label }}
                </el-option>
              </el-select>
              <el-input
                v-else
                class="item item-value"
                :placeholder="'请输入' + col.label"
                v-model="data.customerValue[col.id]"
              />
            </el-col>
          </template>
        </el-row>
      </el-collapse-item>
      <el-collapse-item class="collapse" title="商机信息" name="2">
        <el-row
          class="row"
          v-for="(row, index) in data.chance"
          :key="'row' + index"
        >
          <template v-for="(col, index) in row" :key="'col1' + index">
            <el-col class="col" :span="4">
              <div class="item item-label">{{ col.label }}</div>
            </el-col>
            <el-col class="col" :span="4">
              <el-select
                v-if="col.type === 'select'"
                class="item item-value"
                v-model="data.chanceValue[col.id]"
                :placeholder="'请选择' + col.label"
              >
                <el-option
                  v-for="(item, index) in data.chanceOption[col.id]"
                  :value="item.value"
                  :label="item.label"
                  :key="'op' + index"
                >
                  {{ item.label }}
                </el-option>
              </el-select>
              <el-input
                v-else
                class="item item-value"
                :placeholder="'请输入' + col.label"
                v-model="data.chanceValue[col.id]"
              />
            </el-col>
          </template>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="跟进情况" name="6"> </el-collapse-item>
    </el-collapse>

    <div class="footer">
      <el-button type="primary">保存</el-button>
      <el-button type="primary">提交</el-button>
      <el-button type="primary">新增订单</el-button>
    </div>
  </div>
</template>

<script setup name="ChanceManagement">
const animationDuration = 6000

const data = reactive({
  activeNames: ['1', '2', '3', '4', '5', '6', '7', '8'],
  customer: [
    [
      { label: '纳税人识别号', id: 'nsrsbh' },
      { label: '企业名称', id: 'qymc' },
      { label: '企业规模', id: 'qygm' }
    ],
    [
      { label: '所属服务单位', id: 'ssfwdw' },
      { label: '所属地区', id: 'ssdq' },
      { label: '所属片区', id: 'sspq' }
    ],
    [
      { label: '注册资本', id: 'zczb' },
      { label: '所属税务机关', id: 'ssswjg' },
      { label: '客户经理', id: 'khjl' }
    ],
    [
      { label: '企业联系人1', id: 'qylxr1' },
      { label: '联系人职务', id: 'lxrzw' },
      { label: '企业联系人2', id: 'qylxr2' }
    ],
    [
      { label: '联系电话1', id: 'lxdh1' },
      { label: '联系电话2', id: 'lxhd2' },
      { label: '联系电话3', id: 'lxhd3' }
    ],
    [
      { label: '银行名称', id: 'yhmc' },
      { label: '银行账号', id: 'yhzh' },
      { label: '企业等级', id: 'qydj', type: 'select' }
    ],
    [
      { label: '企业地址', id: 'qydz' },
      { label: '所属代账公司', id: 'ssdzgs' }
    ]
  ],
  chance: [
    [
      { label: '预计销售商品', id: 'yjxssp', type: 'select' },
      { label: '预计销售金额', id: 'yjxsje' },
      { label: '预计签单日期', id: 'yjqdrq', type: 'select' },
      { label: '销售人员', id: 'xsry', type: 'select' }
    ],
    [
      { label: '销售阶段', id: 'xsjd', type: 'select' },
      { label: '成交几率', id: 'cjjl', type: 'select' },
      { label: '商机来源', id: 'sjly', type: 'select' },
      { label: '获取时间', id: 'hqsj', type: 'select' }
    ],
    [{ label: '备注', id: 'bz' }]
  ],

  customerValue: {
    nsrsbh: '',
    qymc: '',
    qygm: '',
    ssfwdw: '',
    ssdq: '',
    sspq: '',
    zczb: '',
    ssswjg: '',
    khjl: '',
    khfl: '',
    qylxr1: '',
    lxrzw: '',
    qylxr2: '',
    lxdh: '',
    lxdh2: '',
    lxdh3: '',
    yhmc: '',
    yhzh: '',
    qydj: '',
    qydz: '',
    ssdzgs: ''
  },
  chanceValue: {
    yjxssp: '',
    yjxsje: '',
    yjqdrq: '',
    xsry: '',
    xsjd: '',
    cjjl: '',
    sjly: '',
    hqsj: '',
    bz: ''
  },

  customerOption: {
    khfl: [
      { label: '一般产品客户', value: '1' },
      { label: '代账公司', value: '2' },
      { label: '重点客户', value: '3' }
    ]
  },
  chanceOption: {},

  orderList: [],

  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10
  }
})
function handleChange() {}
function pagination() {}
</script>

<style scoped lang="scss">
.chanceManagement {
  padding: 20px 60px;
  .header {
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 20px;
  }
  .el-collapse {
    margin-bottom: 40px;
  }
  ::v-deep .el-collapse-item__header {
    position: relative;
    padding-left: 8px;
    font-weight: 600;
    &::after {
      position: absolute;
      content: '';
      top: 14px;
      left: 0px;
      height: 16px;
      width: 3px;
      background-color: #3e92ff;
    }
  }
  .block {
    width: 3px;
    display: inline-block;
    height: 16px;
    background-color: rgb(62, 146, 255);
    margin-right: 8px;
  }

  .col .item {
    //border: 1px solid lightgray;
    height: 36px;
    margin-bottom: 20px;
    //border-right: none;
    //border-bottom: none;
  }

  .row .col:last-child .item {
    //border-right:1px solid lightgray;
  }

  .collapse .row:last-child .col .item {
    //border-bottom:1px solid lightgray;
  }

  .collapse .row:last-child {
    margin-bottom: 10px;
  }

  .item-label,
  .item-value {
    text-align: center;
    font-size: 12px;
    line-height: 30px;
  }

  .item-label {
    text-align: right;
    line-height: 36px;
    margin-right: 15px;
  }

  .item-value {
  }

  .footer {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    border-top: 1px solid lightgray;

    .el-button {
      width: 100px;
    }
  }
}
</style>
